<template>
  <view class="content">
    <view class="main">
      <view class="card">
        <view class="movie-info">
          <u-image
            :src="require('@/static/images/movie/' + movie.imgSrc)"
            width="120rpx"
            height="210rpx"
            border-radius="10"
          ></u-image>
          <view class="detail">
            <view class="order-number">订单号： {{ createOrderNumber() }}</view>
            <view class="movie-name">{{ movie.title }}</view>
            <view class="opera-name"
              >{{ operaName }} · {{ movie.language }}</view
            >
          </view>
        </view>
        <view class="set-info">
          <view class="item">
            <text>观影日期</text>
            <view>{{ date }} {{ day }}</view>
          </view>
          <view class="item">
            <text>时间</text>
            <view>{{ time }}</view>
          </view>
          <view class="item">
            <text>座位</text>
            <view class="sets">
              <view v-for="item in sets" :key="item">{{ item }}</view>
            </view>
          </view>
          <view class="item">
            <text>座位总数</text>
            <view>{{ sets.length }}</view>
          </view>
        </view>
        <view class="code">
          <view class="item">
            <text>兑换码</text>
            <view>515354</view>
          </view>
          <view class="item">
            <text>二维码</text>
            <view>
              <u-image
                src="@/static/images/code.png"
                width="130rpx"
                height="130rpx"
              ></u-image>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" @click="toIndex">返回首页</view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
import { getDayByDate } from '@/utils/getDay';
import { createOrderNumber } from '@/utils/randomOrderNumber';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const movieData = require('@/mock/movie/index.json');
import { IMovie } from '@/@types/common';
import PAGE from '@/const/page';

export default defineComponent({
  onLoad(options) {
    this.movieId = options?.movieId || '';
    this.operaName = options?.operaName || '';
    this.date = options?.date || '';
    this.day = getDayByDate(this.date);
    this.time = options?.time || '';
    this.sets = options?.sets.split(',') || '';
    this.getMovieInfo();
  },
  setup() {
    const state = reactive({
      movieId: '',
      operaName: '',
      date: '',
      day: '',
      time: '',
      sets: [],
    });
    const movie = ref<IMovie>();
    return {
      ...toRefs(state),
      movie,
      createOrderNumber,
    };
  },
  methods: {
    getMovieInfo() {
      movieData.movies.forEach((item: IMovie) => {
        if (item.id === this.movieId) {
          this.movie = item;
        }
      });
    },
    toIndex() {
      uni.switchTab({
        url: PAGE.HOME_INDEX.PATH,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-image: url('@/static/images/chooseSeat.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 40rpx;

  .card {
    width: 670rpx;
    height: 952rpx;
    margin: 0rpx auto;
    background-image: url('@/static/images/pay-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 40rpx;

    .movie-info {
      display: flex;
      .detail {
        margin-left: 20rpx;
        width: calc(100% - 100rpx - 120rpx);
        display: flex;
        flex-direction: column;
        justify-content: center;
        .order-number {
          font-size: 28rpx;
          color: $u-type-primary;
        }

        .movie-name {
          font-size: 32rpx;
          font-weight: 700;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin: 20rpx 0rpx;
        }

        .opera-name {
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .set-info {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: 150rpx;

      .item {
        margin-bottom: 30rpx;
        &:nth-child(2n-1) {
          width: 70%;
        }
        &:nth-child(2n) {
          width: 30%;
        }

        view {
          width: 100%;
          height: 50rpx;
          font-size: 28rpx;
          font-weight: 700;
          margin-top: 24rpx;
          line-height: 50rpx;
        }

        .sets {
          display: flex;
          align-items: center;

          view {
            width: 44rpx;
            height: 44rpx;
            background-color: #4074ff;
            text-align: center;
            line-height: 44rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 700;
            color: #fff;
            margin: 0;
            margin-right: 18rpx;
          }
        }

        .discount {
          color: red;
        }
      }
    }

    .code {
      display: flex;
      .item {
        &:nth-child(2n-1) {
          width: 70%;
        }
        &:nth-child(2n) {
          width: 30%;
        }

        text {
          display: block;
          margin: 30rpx 0rpx;
        }

        view {
          font-size: 32rpx;
          font-weight: 700;
          line-height: 130rpx;
          letter-spacing: 0.75rem;
        }
      }
    }
  }
}

.btn {
  width: 100%;
  height: 100rpx;
  background-color: $u-type-primary;
  text-align: center;
  line-height: 100rpx;
  border-radius: 14rpx;
  margin-top: 50rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.25rem;
}
</style>
